<template>
  <div style="padding: 30px">
    <el-button @click="$router.go(-1)" class="btn-back">返回</el-button>
    <content class="main-area">
      <div class="left-main">
        <el-avatar
          class="avatar-img"
          shape="square"
          :size="200"
          fit="fit"
          :src="userData.avatarUrl"
        ></el-avatar>
        <span style="margin-top: 20px">{{ userData.name | format }}</span>
        <span style="margin-top: 20px">{{ userData.role }}</span>
      </div>
      <el-descriptions
        class="margin-top"
        :column="2"
        border
        style="width: 100%"
      >
        <el-descriptions-item>
          <template slot="label"> 昵称 </template>
          {{ userData.nickName | format }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 用户编号 </template>
          {{ userData.id | format }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 性别 </template>
          <el-tag v-if="userData.sex === '1'">男</el-tag>
          <el-tag v-if="userData.sex === '2'" type="danger">女</el-tag>
          <el-tag v-if="userData.sex === '0'" type="warning">未填写</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 手机号 </template>
          {{ userData.phone_number | format }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 门牌号 </template>
          {{ userData.doorplate | format }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 邀请码 </template>
          {{ userData.invite_number | format }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 已邀请人数 </template>
          {{ userData.invite_people_number | format }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 小区 </template>
          {{ userData.community | format }}
        </el-descriptions-item>
        <el-descriptions-item v-if="userData.inviter_name !== null">
          <template slot="label"> 邀请人 </template>
          {{ userData.inviter_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 实名认证时间 </template>
          {{ userData.real_name_time | dateFormat }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 实名认证状态 </template>
          <el-tag v-if="userData.real_status === 3">已实名</el-tag>
          <el-tag v-if="userData.real_status === 2" type="warning"
            >审核中</el-tag
          >
          <el-tag v-if="userData.real_status === 1" type="danger"
            >未实名</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 注册时间 </template>
          {{ userData.create_time | dateFormat }}
        </el-descriptions-item>
      </el-descriptions>
    </content>
    <!-- <div class="totalMessage">
      <nav class="nav-title">
        <div class="blueBar"></div>
        <span>统计信息</span>
      </nav>
      <el-descriptions direction="vertical" :column="6" border>
        <el-descriptions-item label="每日善行发布量"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="嗨！邻居们发布量"
          >18100000000</el-descriptions-item
        >
        <el-descriptions-item label="发表评论数量">苏州市</el-descriptions-item>
        <el-descriptions-item label="发布收集册数量"
          >苏州市</el-descriptions-item
        >
        <el-descriptions-item label="参与投票次数">苏州市</el-descriptions-item>
        <el-descriptions-item label="参与活动次数">苏州市</el-descriptions-item>
        <el-descriptions-item label="获赞数量">苏州市</el-descriptions-item>
        <el-descriptions-item label="关注数量">苏州市</el-descriptions-item>
        <el-descriptions-item label="粉丝数量">苏州市</el-descriptions-item>
        <el-descriptions-item label="累计登录天数">苏州市</el-descriptions-item>
      </el-descriptions>
    </div> -->
  </div>
</template>
<script>
import { readUserInfo } from "@/api/user-list";
import moment from "moment";
export default {
  name: "userDetails",
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  filters: {
    dateFormat: function (date) {
      return moment.unix(date).format("YYYY-MM-DD HH:mm:ss");
    },
    format: function (data) {
      if (data === "0") {
        return "未填写";
      }
      return data;
    },
  },
  data() {
    return {
      userData: [],
    };
  },
  created() {
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id;
      //   console.log(id);
      this.getUserData(id);
    }
  },
  methods: {
    async getUserData(id) {
      let self = this;
      const res = await readUserInfo(id);
      //   console.log(res);
      self.userData = res.result[0];
      if (self.userData.role_id === 1) {
        this.userData.role = "普通居民";
      } else if (self.userData.role_id === 2) {
        this.userData.role = "联动公益人";
      } else if (self.userData.role_id === 3) {
        this.userData.role = "联动公益大使";
      } else if (self.userData.role_id === 4) {
        this.userData.role = "工作人员";
      }
      console.log(this.userData);
    },
  },
};
</script>
<style lang="scss" scoped>
.main-area {
  border: 1px solid skyblue;
}
.left-main {
  width: 400px;
  height: 351px;
  // border: 1px solid #20a0ff;
  text-align: center;
  .avatar-img {
    margin: 0 auto;
  }
}
.totalMessage {
  margin-top: 30px;
}
.blueBar {
  width: 7px;
  height: 30px;
  background: #20a0ff;
  margin-right: 10px;
}
.nav-title {
  align-items: center;
  margin-bottom: 25px;
}
.btn-back {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>